/* 通配符选择器，简单样式重置，不要使用 */
/* *{
    margin: 0;
    padding: 0;
} */

/* ID选择器 */
#unique {
  color: red;
}

/* 类选择器 */
.box {
  color: blue;
}

/* 元素选择器 */
p {
  color: chocolate;
}

/* 所有语言定义为英文的标签样式 */
*[lang^="en"] {
  color: green;
}

/* 并集选择器 */
pre,
.special {
  color: darkblue;
}

/* 交集选择器 */
p.special {
  color: blueviolet;
}

/* 属性选择器 */
/* p[data-user] {
  color: blue;
} */
/* p[data-user="username"] {
  color: brown;
} */
/* p[data-user^="user"] {
  color: brown;
} */
p[data-user$="name"] {
  color: brown;
}

input[type="email"]{
  background: rgb(255, 161, 161);
}

/* 伪类选择器 */
a:hover{
  color: red;
}

#p-class li:first-child{
  color: red;
}

#p-class li:last-of-type{
  color: blue;
}

#p-class table, #p-class table td {
  border: 1px solid red;
}

#p-class tr:nth-of-type(2n+1){
  background: rgb(238, 191, 191);
}

#p-class tr:nth-of-type(2n):hover{
  background: #000;
  color: gold;
}

#p-class tr:not(:first-child){
  color: green;
}

#p-class input[type="text"]:focus{
  outline: none;
  border: 5px solid #000;
}

/* 伪元素选择器 */
#p-element li{
  display: inline-block;
}
#p-element li:hover{
  cursor: pointer;
  color: red;
}
/*content伪元素必要的的属性，可以为空值 */
#p-element li::before{
   content: "🐴"; 
   color: black;
   padding: 0 10px;
}

#p-element li:hover::before{
  /* display: block; */
  content: "🐴"; 
  color: red; 
}

#p-element li:last-of-type::after{
  content: ""; 
}

/* 后代选择器 */
article.one p{
  font-size: 20px;
}
/* 子代选择器 */
article.two > p{
  font-size: 30px;
}

/* 相邻兄弟选择器 */
article.three p + pre{
  font-size: 40px;
}
/* 通用兄弟选择器 */
article.four p ~ pre{
  font-size: 20px;
  font-weight: 900;
}